<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CCRM管理平台</title>
<link href="${gPath}/styles/dpl-min.css" rel="stylesheet" />
<link href="${gPath}/styles/bui-min.css" rel="stylesheet" />
<link href="${gPath}/styles/main.css" rel="stylesheet" />
<style>
.bui-stdmod-body {
	overflow-x: hidden;
	overflow-y: auto;
}
</style>
</head>
<body>
	<!--列表页-->
	<div class="container">
		<form id="searchForm" class="form-panel">
			<ul class="panel-content">
				<li>
					<span>
						<label>id：</label>
						<input type="text" class="control-text" name="activityContent.activity_id" />
					</span>
					<span>
						<label>活动名称：</label>
						<input type="text" class="control-text" name="activityContent.activity_name" />
					</span>
					<span>
						<label>开始时间：</label>
						<input name="activityContent.activity_date_start" data-tip="{text : '开始时间'}" class="input-small calendar calendar-time" type="text" />
					</span>
					<span>
						<label>结束时间：</label>
						<input name="activityContent.activity_date_end" data-tip="{text : '结束时间'}" class="input-small calendar calendar-time" type="text" />
					</span>
					<span>
						<label>状态：</label>
						<select name="activityContent.status">
							<option value="">全部</option>
							<option value="0">冻结</option>
							<option value="1">激活</option>
						</select>
					</span>
					<button type="button" id="btnSearch" class="button button-primary">搜索</button>
				</li>
			</ul>
		</form>

		<div id="toolbar" style="width: 55px;"></div>
		<div class="search-grid-container">
			<div id="grid"></div>
		</div>
	</div>

	<!--表单页-->
	<div id="ModelFormDialog" style="display: none">
		<form id="ModelForm" class="form-horizontal">
			<input type="hidden" name="activityContent.activity_code" id="activityCode"/>
			<div class="control-group">
				<label class="control-label">名称：</label>
				<div class="controls">
					<input class="input-normal control-text" type="text" name="activityContent.activity_name" data-rules="{required:true}" data-messages="{required:'名称不能为空'}" data-tip="{text:'请输入名称'}" />
				</div>
			</div>
			<div class="control-group" id="subject" style="display: none">
				<label class="control-label">主题：</label>
				<div class="controls">
					<select name="activityContent.parent_id" id="parent_item"></select>
				</div>
			</div>
			<div class="control-group" id="dateStart" style="display: none">
				<label class="control-label">开始时间：</label>
				<div class="controls">
					<input name="activityContent.activity_date_start" data-tip="{text : '开始时间'}" class="input-small calendar calendar-time" type="text" />
				</div>
			</div>
			<div class="control-group" id="dateEnd" style="display: none">
				<label class="control-label">结束时间：</label>
				<div class="controls">
					<input name="activityContent.activity_date_end" data-tip="{text : '结束时间'}" class="input-small calendar calendar-time" type="text" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">是否启用：</label>
				<div class="controls">
					<select name="activityContent.status">
						<option value="1">是</option>
						<option value="0">否</option>
					</select>
				</div>
			</div>
			<div class="control-group" id="activityAddress" style="display: none">
				<label class="control-label">活动地址：</label>
				<div class="controls">
					<input class="input-large control-text" type="text" name="activityContent.activity_address" />
				</div>
			</div>
			<div class="control-group" id="remark" style="width: 550px; height: 80px;">
				<label class="control-label">备注：</label>
				<div class="controls">
					<textarea class="input-large" name="activityContent.remark"></textarea>
				</div>
			</div>
			<div class="row form-actions actions-bar">
				<div class="span13 offset3 ">
					<button type="submit" class="button button-primary">保存</button>
					<button type="reset" class="button">重置</button>
					<button type="button" class="button button-info">活动二维码</button>
				</div>
			</div>
		</form>
	</div>
	
	<div id="QRCodeDialog" style="display: none">
		<div class="control-group" style="margin-top: 10px; height: 300px;" id="QRCodeDiv"></div>
	</div>
	
	<script type="text/javascript" src="${gPath}/scripts/jquery/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="${gPath}/scripts/bui.js"></script>
	<script type="text/javascript" src="${gPath}/scripts/treegrid-min.js"></script>
	<script type="text/javascript" src="${gPath}/scripts/common/search.js"></script>
	<script type="text/javascript">
		var URI = "${gPath}/clmp/dingtalk/mobility/activityContent", MODULE = 'activityContent';
		var qrhub = 'http://192.168.1.10:8080/CallBell/clmp/activityContent/QRCodeHub';
		BUI.use(['bui/extensions/treegrid', 'bui/overlay', 'bui/toolbar', 'bui/form', 'bui/data'],
				function(TreeGrid, Overlay, Toolbar, Form, Data){
			var store = new Data.TreeStore({
	            url : URI,
	            autoLoad : true,
	            autoSync : true
	        });
			
			var tree = new TreeGrid({
                render : '#grid',
	            store : store,
	            columns : [
                    {title : 'ID', dataIndex :'activity_id', width : '200'},
                    {title : '名称', dataIndex :'activity_name', width : '200'},
                    {title : 'code', dataIndex :'activity_code', width : '200', visible: false},
                    {title : '状态', dataIndex :'status', width : '200', renderer: function(value, obj){
                        return value == 1 ? '是' : '否';
                    }},
                    {title : '操作', dataIndex :'', width : '30%', renderer : function(value, obj){
                        var delStr = '<shiro:hasPermission name="/clmp/dingtalk/mobility/activityContent/*:delete"><span class="grid-command btn-delete")>删除</span></shiro:hasPermission>';
                        if(obj.parent_id == 0){
                            var addStr = '<shiro:hasPermission name="/clmp/dingtalk/mobility/activityContent:post"><span class="grid-command btn-add">新增</span></shiro:hasPermission>';
                            var editStr = '<shiro:hasPermission name="/clmp/dingtalk/mobility/activityContent/*:post"><span class="grid-command btn-edit">编辑</span></shiro:hasPermission>';
                            return addStr + editStr + delStr;
                        } else {
                            var addActivity = '<shiro:hasPermission name="/clmp/dingtalk/mobility/activityContent/getQRCode"><span class="grid-command btn-QRCode">二维码</span></shiro:hasPermission>';
                            var editStr = '<shiro:hasPermission name="/clmp/dingtalk/mobility/activityContent/*:post"><span class="grid-command btn-edit1">编辑</span></shiro:hasPermission>';
                            return addActivity + editStr + delStr;
                        }
                    }}
                ],
	            height:'100%'
	        });
		
			tree.on('cellclick', function (ev) {
	            var ele = $(ev.domTarget); //点击的Dom
	            var record = ev.record;
	            if (ele.hasClass('btn-delete')) {
	            	deleteRecord(record);
	            } else if (ele.hasClass('btn-edit')) {
	            	$('#subject').hide();
	            	$('#activityAddress').hide();
	            	$('#dateStart').hide();
	            	$('#dateEnd').hide();
	            	editRecord(record);
	            }else if(ele.hasClass('btn-edit1')){
	            	$('#subject').show();
	            	$('#activityAddress').show();
	            	$('#dateStart').show();
	            	$('#dateEnd').show();
	            	loadParentItems(record);
	            	editRecord(record);
	            } else if(ele.hasClass('btn-QRCode')){
	            	getQrCode(record);
	            }else if (ele.hasClass('btn-add')) {
	            	$('#subject').show();
	            	$('#activityAddress').show();
	            	$('#dateStart').show();
	            	$('#dateEnd').show();
	            	addRecord(record);
	            }
	        }).render();
			
			function addRecord(record){
                form.clearFields();
				loadParentItems(record);
				var code = num();
				$('#activityCode').val(code);
				
				form.set('action', URI);
		        form.set('method', 'post');
		        dialog.show();
			}
			
			function editRecord(record){
				form.clearFields();
				form.set('action', URI + "/" + record.activity_id);
		        form.set('method', 'post');
		        for ( var name in record) {
                    form.setFieldValue(MODULE + '.' + name, record[name]);
				}
		        dialog.show();
			}
			
			function loadParentItems(record){
				$.ajax({
		            url : URI + "/getParentItem",
		            type : "get",
		            cache : false,
		            async : false,
		            dataType : "json",
		            success : function(data){
		                var parentItem = $('#parent_item');
		                for (var i in data) {
		                    parentItem.append('<option value="'+ data[i].id +'" '+ (record && record.activity_id == data[i].id ? 'selected="selected"':'') +'>'+ data[i].item_name +'</option>')
		                }
		            }
		        });
			}
			
			function getQrCode(record){
				$.ajax({
		            url : URI + "/getQRCode",
		            type : "get",
		            cache : false,
		            async : false,
		            dataType : "json",
		            data : {'activityCode' : record.activity_code},
		            success : function(data){
		                var QRCodeDiv = $('#QRCodeDiv');
		                for (var i in data) {
		                	QRCodeDiv.append('<div class="controls" style="float: left; margin-left: 20px; margin-top: 10px;"><img src="'+data[i].qr_code+'" width="300" height="300"/></div>')
		                }
		            }
		        });
				qrcodeDialog.show();
			}
			
			function deleteRecord(record){
		        BUI.Message.Confirm('确认要删除选中的记录么？', function () {
		            $.ajax({
		                url: URI + "/" + record.activity_id,
		                dataType: 'json',
		                type: 'DELETE',
		                cache : false,
		                success: function (data) {
		                    if (data.status == 1) {
		                        BUI.Message.Alert('操作成功');
		                        store.load();
		                    } else {
		                        BUI.Message.Alert('操作失败:' + data.msg);
		                    }
		                }
		            });
		        }, 'question');
		    }
			
			var bar = new Toolbar.Bar({
	            render : '#toolbar',
	            elCls: 'toolbar',
	            autoRender : true,
	            children : [{xtype:'button', btnCls : 'button button-small', text:'<i class="icon-plus"></i>新增'}],
	            listeners : {
	            	click : function(event){
	            		form.clearFields();
	            		loadParentItems();
	                    form.set('action', URI);
	                    form.set('method', 'post');
	                    dialog.show();
	            	}
	            }
	        });
			
			var dialog = new Overlay.Dialog({
	            title: '表单',
	            width: 580,
	            height: 530,
	            mask: true,
	            buttons: [],
	            contentId: 'ModelFormDialog'
	        });
			
			var qrcodeDialog = new Overlay.Dialog({
				title: '二维码',
				width: 700,
				height: 530,
				buttons: [],
				contentId: 'QRCodeDialog'
			});
			
			dialog.on("closed", function(e){
                form.clearFields();
	            $('#parent_item').html('');
	       });
			
			qrcodeDialog.on('closed', function(e){
                form.clearFields();
	            $('#QRCodeDiv').html('');
			});
			
			form = new Form.HForm({
	            srcNode: '#ModelForm',
	            submitType: 'ajax',
	            callback: function (data) {
	                if (data.status == 1) {
	                    BUI.Message.Alert('操作成功');
	                    store.load();
	                    dialog.close();
	                } else {
	                    BUI.Message.Alert('操作失败:' + data.msg);
	                }
	            }
	        }).render();
			
			$('.button-info').click('onclick', function(){
				var divTag = '<div class="control-group"><label class="control-label">二维码URL: </label><div class="controls"><input class="input-large" type="text" style="margin-top: -10px;"/><input class="qr_code" type="hidden" name="QRCode"/><span class="x-icon x-icon-success" onclick="createQRCode(this);" style="margin-left:10px;"><i class="icon icon-ok icon-white"></i></span><span class="x-icon x-icon-normal" onclick="delRow(this);" style="margin-left:5px;">×</span></div></div>';
				$('#remark').after(divTag);
			});
		});
		
		function createQRCode(obj){
			var inputUrl = $(obj).siblings('input').val();
			var code = $('#activityCode').val();
			var text = qrhub + '?' + 'url=' + inputUrl + code;
			var qrCode = 'http://qr.topscan.com/api.php?text=' + text;
			
			BUI.Message.Alert('操作成功');
			$(obj).siblings('.qr_code').val(qrCode);
			$(obj).siblings('.x-icon-normal').after('<a style="margin-left:5px;" href="'+qrCode+'" target="_blank">查看</a>');
		}
		
		function num(){
			var mm=Math.random();
			var six = '';
			if(mm > 0.1){
				six=Math.round(mm*1000000);
			} else {
				mm += 0.1;
				six = Math.round(mm*1000000);
			}
			return six;
		}
		
		function delRow(obj){
			$(obj).parent('.controls').parent('.control-group').remove();
		}
	</script>
</body>
</html>